<template>
  <div>
    <van-nav-bar title="我的订单" />
    <van-list
      class="pb-[50px]"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div
        v-for="item in list"
        :key="item"
        class="ml-4 mr-4 mt-2 bg-white shadow-md rounded-md p-3"
        @click="toDetail(item)"
      >
        <div class="flex">
          <span class="w-[4em]">发货方:</span>
          <div>
            <p>
              {{ item.sendUser.name }}
              <span class="text-blue-500">{{ item.sendUser.phone }}</span>
            </p>
            <p class="text-gray-500 text-sm">
              {{ filterAddress(item.sendUser) }}
            </p>
          </div>
        </div>
        <div class="flex mt-1">
          <span class="w-[4em]">收货方:</span>
          <div>
            <p>
              {{ item.resivceUser.username }}
              <span class="text-blue-500">{{ item.resivceUser.phone }}</span>
            </p>
            <p class="text-gray-500 text-sm">
              {{ filterAddress(item.resivceUser) }}
            </p>
          </div>
        </div>
        <div class="flex justify-between text-sm">
          <span class="text-gray-400">{{ item.createTime }}</span>
          <div>
            <div class="flex justify-end items-center">
              <el-button type="primary" size="small" @click.stop="toEdit(item)"
                ><van-icon name="edit" />编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click.stop="deleteItem(item)"
                ><van-icon name="delete" />删除</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { ref } from "vue";
import { orderMyOrderPage, orderRemoveAll } from "@/api/order";
import { reactive } from "vue";
import { showConfirmDialog, showToast } from "vant";
import { useRouter } from "vue-router";

export default {
  setup() {
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const router = useRouter();

    const pagination = reactive({
      current: 1,
      size: 10,
    });

    const onLoad = async () => {
      const { result } = await orderMyOrderPage(pagination);
      const { page, content } = result;

      list.value.push(...content);

      loading.value = false;
      if (page.totalElements == list.value.length) {
        finished.value = true;
      }
    };

    const filterAddress = (user) => {
      return `${user.prov}${user.city}${user.area}${user.town}${user.address}`;
    };

    const toEdit = (item) => router.push("/order/edit/" + item.id);

    const deleteItem = async (item) => {
      await showConfirmDialog({
        title: "提示",
        message: "是否确认删除当前订单？",
      });
      const { success } = await orderRemoveAll(item.id);
      if (success) {
        list.value = list.value.filter((v) => v.id !== item.id);
        showToast({
          type: "success",
          message: "删除成功!",
        });
      }
    };

    const toDetail = (item) => router.push("/order/detail/" + item.id );

    return {
      loading,
      finished,
      onLoad,
      filterAddress,
      deleteItem,
      toEdit,
      toDetail,
      list,
    };
  },
};
</script>
